<template>
  <div class="fullscreen">
    <header class="header">
      <h1>每月数据展示</h1>
    </header>

    <section class="statistics">
      <div class="stat-card">
        最新日期: <span>{{ data[0].date }}</span>
      </div>
      <div class="stat-card">
        总资产: <span>{{ data[0].currentDaySum }}</span>
      </div>
      <div class="stat-card">
        当月收入: <span>{{ data[0].difference }}</span>
      </div>
    </section>

    <section class="charts">
      <div class="chart-container">
        <canvas id="myChart" /> <!-- 图表 -->
      </div>
    </section>

    <section class="data-table">
      <h2>详细数据</h2>
      <table>
        <thead>
          <tr>
            <th>月份</th>
            <th>当前总和</th>
            <th>差值</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in data" :key="item.month">
            <td>{{ item.date }}</td>
            <td>{{ item.currentDaySum }}</td>
            <td :class="{ 'negative': item.difference < 0 }">{{ item.difference }}</td>
          </tr>
        </tbody>
      </table>
    </section>
  </div>
</template>

<script>
import Stomp from 'stompjs'
// import Chart from 'chart.js'

export default {
  name: 'App',
  data() {
    return {
      client: null,
      data: [], // 存储从 RabbitMQ 接收到的数据
      totalSum: 0, // 当前总和
      totalDifference: 0, // 差值总和
      otherMetric: 0 // 其他指标
    }
  },
  mounted() {
    console.log('初始化中...')
    this.connect()
    this.initChart() // 初始化图表
  },
  beforeDestroy() {
    // 在组件销毁前断开连接
    if (this.client) {
      this.client.disconnect()
      console.log('已断开与 RabbitMQ 的连接')
    }
  },
  methods: {
    onConnected(frame) {
      console.log('连接到 RabbitMQ 的 STOMP')
      const topic = '/queue/GetDataToHead' // 订阅的队列
      this.client.subscribe(topic, this.responseCallback, this.onFailed)
    },

    onFailed(frame) {
      console.error('MQ 连接失败:', frame)
    },

    responseCallback(frame) {
      try {
        const jsonObject = JSON.parse(frame.body)
        this.data = jsonObject
        this.calculateTotals() // 计算总和
        this.updateChart() // 更新图表
      } catch (error) {
        console.error('JSON 解析错误:', error)
      }
    },

    connect() {
      console.log('准备连接到 RabbitMQ...')
      this.client = Stomp.client('ws://127.0.0.1:15674/ws')
      const headers = {
        login: 'admin',
        passcode: '123456',
        host: '/uwb'
      }
      this.client.connect(headers, this.onConnected, (error) => {
        console.error('连接失败:', error)
        alert('连接 RabbitMQ 失败: ' + error.headers.message)
      })
    },

    calculateTotals() {
      this.totalSum = this.data.reduce((sum, item) => sum + item.currentDaySum, 0)
      this.totalDifference = this.data.reduce((sum, item) => sum + item.difference, 0)
      // this.otherMetric = /* 其他指标的计算 */;
    },

    initChart() {
      const ctx = document.getElementById('myChart').getContext('2d')
      this.chart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: this.data.map(item => item.date),
          datasets: [{
            label: '当前总和',
            data: this.data.map(item => item.currentDaySum),
            borderColor: 'rgba(75, 192, 192, 1)',
            fill: false
          }]
        },
        options: {
          responsive: true,
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      })
    },

    updateChart() {
      if (this.chart) {
        this.chart.data.labels = this.data.map(item => item.date)
        this.chart.data.datasets[0].data = this.data.map(item => item.currentDaySum)
        this.chart.update()
      }
    }
  }
}
</script>

<style scoped>
.fullscreen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100vh; /* 全屏高度 */
  background-color: #f8f9fa; /* 背景颜色 */
  padding: 20px; /* 内边距 */
}

.header {
  margin-bottom: 20px;
}

.statistics {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-bottom: 20px;
}

.stat-card {
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  width: 30%; /* 统计卡片宽度 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.charts {
  width: 100%;
  margin-bottom: 20px;
}

.chart-container {
  width: 100%;
  max-width: 800px; /* 最大宽度限制 */
}

.data-table {
  width: 100%;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

th {
  background-color: #f4f4f4;
}

tr:hover {
  background-color: #f1f1f1;
}

.negative {
  color: red;
}
</style>
